<template>
  <div>
    <div class="banner"></div>
    <div class="server">
      <div class="content">
        <p class="title">产品与服务</p>
        <serve></serve>
      </div>
    </div>
    <div class="services">
      <p class="title">产品与服务</p>
      <div class="content">
        <div
          @mouseenter="indexs = index"
          @mouseleave="indexs = 99"
          :style="
            index == indexs
              ? { background: `url(${item.bg})`, color: '#fff' }
              : ''
          "
          :class="index == indexs ? 'itemNow' : 'item'"
          v-for="(item, index) of serviceList"
        >
          <div style="width: 144px; display: flex; justify-content: center">
            <div
              v-show="index == indexs"
              :class="'iconfont ' + item.icon"
            ></div>

            <svg v-show="index != indexs" class="icon iconA" aria-hidden="true">
              　　
              <use class="whites" :xlink:href="'#' + item.icon"></use>
            </svg>
          </div>
          <div class="isText">
            <p class="text1">{{ item.title }}</p>
            <p class="text2">{{ item.text }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import serve from "@/components/serveNew.vue";
export default {
  components: {
    serve,
  },
  data() {
    return {
      indexs: 99,
      serviceList: [
        {
          title: "快速上线",
          icon: "icon-a-bianzu13",
          text: "在线培训SaaS平台，确保用户安全稳定适用，实现安全生产培训全流程需求，无需服务器硬件，独立部署云端；",
          bg: require("@/assets/produce/bg1.png"),
        },
        {
          title: "免费开发",
          icon: "icon-a-bianzu14",
          text: "所用功能产品全部免费开放，无需付费，新一代IT技术、大数据、人工智能和云计算技术，实现经营管理数据智能化平台；",
          bg: require("@/assets/produce/bg2.png"),
        },
        {
          title: "稳定运维",
          icon: "icon-a-bianzu15",
          text: "泰捷云学服务团队在服务的体系化、专业化、智能化、规模化方面持续改进，追求卓越。为客户一对一专属运营支持服务，后台托管，自动化运维，问题预警；",
          bg: require("@/assets/produce/bg3.png"),
        },
        {
          title: "内容更新",
          icon: "icon-a-bianzu16",
          text: "满足机构专题专项相关安全培训，适用于多种行业培训需求，教育培训内容丰富全面，相关内容实时更新维护；",
          bg: require("@/assets/produce/bg4.png"),
        },
        {
          title: "数据安全",
          icon: "icon-a-bianzu18",
          text: "云端服务器独立部署，数据加密及防护保密协议，全面保障各类数据安全；",
          bg: require("@/assets/produce/bg5.png"),
        },
        {
          title: "定制开发",
          icon: "icon-a-bianzu19",
          text: "为客户安全教育定制培训服务解决方案，包括功能扩展及课程内容定制；",
          bg: require("@/assets/produce/bg6.png"),
        },
      ],
    };
  },
};
</script>

<style lang='scss' scoped>
p {
  margin: 0;
}
.banner {
  width: 100%;
  height: 530px;
  background: url("@/assets/produce/banner.png");
  background-position: 50%;
  min-width: 1320px;
}
.server {
  height: auto;
  width: 100%;
  min-width: 1320px;
  background: #fff;
  .content {
    .title {
      margin-top: 98px;
      margin-bottom: 26px;
      font-size: 36px;
      font-weight: 500;
      color: #333333;
      letter-spacing: 3px;
    }
    width: 1320px;
    margin: auto;
    overflow: hidden;
  }
}
.services {
  overflow: hidden;
  height: 970px;
  width: 100%;
  background: #f7faff;
  .content {
    margin: auto;
    width: 1320px;
    height: 666px;
    // background: #333333;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    .item {
      &:hover {
        color: #0a54dc;
      }
      cursor: pointer;
      width: 644px;
      height: 206px;
      background: #fff;
      display: flex;
      color: #000;
      justify-content: center;
      align-items: center;

      .iconfont {
        width: 60px;
        margin: auto;
        font-size: 60px;
      }
      .iconA {
        width: 60px;

        height: 60px;
      }
      .isText {
        width: 436px;
        .text1 {
          font-size: 20px;
          font-weight: 500;

          padding-bottom: 18px;
          margin-bottom: 18px;
          border-bottom: 1px solid #eeeeee;
        }
        .text2 {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
        }
      }
    }
    .itemNow {
      &:hover {
        color: #0a54dc;
      }
      cursor: pointer;

      width: 644px;
      height: 206px;
      background: pink;
      display: flex;
      justify-content: center;
      align-items: center;

      .iconfont {
        width: 60px;
        margin: auto;
        font-size: 60px;
      }
      .iconA {
        width: 60px;

        height: 60px;
      }
      .isText {
        width: 436px;
        .text1 {
          font-size: 20px;
          font-weight: 500;
          color: #ffffff;
          padding-bottom: 18px;
          margin-bottom: 18px;
          border-bottom: 1px solid #75a4fd;
        }
        .text2 {
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
        }
      }
    }
  }
  .title {
    font-size: 36px;
    font-weight: 500;
    color: #333333;
    margin: 104px auto 50px;
    text-align: center;
  }
}
</style>